<template>
  <div>
    <el-row :gutter="10">
      <el-col class="home-col" :xs="24" :sm="12" :md="6">
        <CommonCard title="今日销售额" value="30,346,799">
          <div>
            日同比 -19.16%
            <svg
              t="1664181910518"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2971"
              width="14"
              height="14"
            >
              <path
                d="M482.133333 738.133333L136.533333 392.533333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 8.533333-8.533333 19.2-12.8 29.866667-12.8h689.066667c23.466667 0 42.666667 19.2 42.666666 42.666667 0 10.666667-4.266667 21.333333-12.8 29.866666L541.866667 738.133333c-17.066667 17.066667-42.666667 17.066667-59.733334 0z"
                p-id="2972"
                fill="#d81e06"
              ></path>
            </svg>
          </div>
          <div>
            日同比 56.67%
            <svg viewBox="0 0 1024 1024" width="14" height="14">
              <path
                d="M541.866667 285.866667l345.6 345.6c17.066667 17.066667 17.066667 42.666667 0 59.733333-8.533333 8.533333-19.2 12.8-29.866667 12.8H168.533333c-23.466667 0-42.666667-19.2-42.666666-42.666667 0-10.666667 4.266667-21.333333 12.8-29.866666l343.466666-345.6c17.066667-17.066667 42.666667-17.066667 59.733334 0z"
                fill="#008000"
              ></path>
            </svg>
          </div>
          <template #footer> 昨日销售额¥ 360,000,00 </template>
        </CommonCard>
      </el-col>
      <el-col class="home-col" :xs="24" :sm="12" :md="6">
        <CommonCard title="今日订单" value="256,206,1">
          <LineChart />
          <template #footer> 昨日订单量¥ 210,000,0 </template>
        </CommonCard>
      </el-col>
      <el-col class="home-col" :xs="24" :sm="12" :md="6">
        <CommonCard title="今日交易用户数" value="182,425">
          <BarChart />
          <template #footer> 退货率5.91% </template>
        </CommonCard>
      </el-col>
      <el-col class="home-col" :xs="24" :sm="12" :md="6">
        <CommonCard title="累计用户数" value="117,796,5">
          <ProgressChart />
          <template #footer>
            日同比 17.70%
            <svg viewBox="0 0 1024 1024" width="14" height="14">
              <path
                d="M541.866667 285.866667l345.6 345.6c17.066667 17.066667 17.066667 42.666667 0 59.733333-8.533333 8.533333-19.2 12.8-29.866667 12.8H168.533333c-23.466667 0-42.666667-19.2-42.666666-42.666667 0-10.666667 4.266667-21.333333 12.8-29.866666l343.466666-345.6c17.066667-17.066667 42.666667-17.066667 59.733334 0z"
                fill="#008000"
              ></path>
            </svg>
            月同比 47.12%
            <svg
              t="1664181910518"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2971"
              width="14"
              height="14"
            >
              <path
                d="M482.133333 738.133333L136.533333 392.533333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 8.533333-8.533333 19.2-12.8 29.866667-12.8h689.066667c23.466667 0 42.666667 19.2 42.666666 42.666667 0 10.666667-4.266667 21.333333-12.8 29.866666L541.866667 738.133333c-17.066667 17.066667-42.666667 17.066667-59.733334 0z"
                p-id="2972"
                fill="#d81e06"
              ></path>
            </svg>
          </template>
        </CommonCard>
      </el-col>
    </el-row>

    <Sales />

    <PieChart />

    <BMap />

    <ChinaMap />
  </div>
</template>

<script lang="ts">
export default {
  name: "XHome",
};
</script>

<script lang="ts" setup>
import CommonCard from "./components/CommonCard.vue";
import LineChart from "./components/LineChart.vue";
import BarChart from "./components/BarChart.vue";
import ProgressChart from "./components/ProgressChart.vue";
import Sales from "./components/Sales.vue";
import PieChart from "./components/PieChart.vue";
import BMap from "./components/BMap.vue";
import ChinaMap from "./components/ChinaMap.vue";
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
}
.home-col {
  margin-bottom: 10px;
}
</style>
